<template>
    <div id="app">
        <div class="co">
            <h1>{{msg}}</h1>

<!--     通过父组件给子组件传递 回调函数 的props实现： 子给父传递数据       -->
            <School :getSchoolName="getSchoolName"/>

<!--      v-on 绑定自定义事件 @也可以自定义  给这个组件的实例对象绑定一个chengheng事件     -->
            <Student v-on:chengheng="demo"/>
<!--            <Student v-on:chengheng.once="demo"/>-->


<!--
@click.native 放在组件上就是用的原生事件， 组件的最外层div，就产生了事件
-->


<!--      使用ref给这个组件的对象绑定事件   this.$refs.student.$on    -->
            <Student ref="student"/>

<!--          子组件给父传数据，在父组件给子组件定义事件，定义回调函数  -->
        </div>
    </div>
</template>

<script>

import School from "./components/School.vue";
import Student from "./components/Student.vue";

export default {
    name: "App",
    components: {
        School,
        Student
    },
    data() {
        return {
            msg : "组件的自定义事件"
        }
    },
    methods: {
        getSchoolName(name) {
            console.log("App收到了学校名：", name)
        },
        demo(name) {
            console.log("demo被调用了", name)
        }
    },
    mounted() {

        this.$refs.student.$on("chengheng", this.demo)
        // this.$refs.student.$once("chengheng", this.demo)
    }
}
</script>

<style>
.co {
    background-color: dimgrey;
}
</style>
